<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<h2>兴趣爱好：<label></label></h2>
<input type="checkbox" id="c1"><label for="c1">篮球</label>
<input type="checkbox" id="c2"><label for="c2">游泳</label>
<input type="checkbox" id="c3"><label for="c3">唱歌</label>
<input type="checkbox" id="c4"><label for="c4">桌游</label>
<br/>
<button>获取</button>
</body>
<script type="text/javascript">
    document.querySelector('button').addEventListener('click',function(e) {
        e.preventDefault();//组织按钮默认事件
        var checked = document.querySelectorAll('input:checked'),
        results = [];
        checked = Array.prototype.slice.call(checked);
        //元素列表转为数组
        checked.forEach(function (item) {
            var id = item.getAttribute('id'),
                    label = document.querySelector('label[for="' + id + '"]');
            results.push(label.innerHTML);//数值推入数组
        });
        document.querySelector('h2>label').innerHTML=results.join(",");
    })
</script>
</html>